<template>
	<view class="content">
		<view class="topSearch" :style="{'padding-top':10+'px'}">
			
			<view class="screen">
				<uni-easyinput class="searchInput" suffixIcon="search" v-model="search" placeholder="姓名、电话等" @iconClick="searchblur">
				</uni-easyinput>
				<!-- <view class="find" @click="showPop">
					<span>筛选客户类别</span>
					<image src="/static/2.png"></image>
				</view> -->
			</view>
			<view class="totalNum" v-if="!screenPop">
				<view class="line"></view>
				<view class="text">{{ count }}条客户数据</view>
			</view>
			<view class="screen-box" v-if="screenPop">
				<view class="title">客户类别</view>
				<view class="list">
					<uni-data-checkbox mode="tag" multiple v-model="save_input_text"
						:localdata="leibieList"></uni-data-checkbox>
				</view>
				<view class="title">时间筛选</view>
				<uni-datetime-picker class="dataRrange" v-model="dataRrange" type="daterange"
					@change="dataRrangeChange" />
				<view class="btn-group">
					<view @click="reset">重置</view>
					<view @click="confirmScreen">筛选</view>
				</view>
			</view>
		</view>
		<scroll-view :style="{'height': height +'px'}" class="scroll-view" scroll-y="true"
			@scrolltolower="onReachBottom">
			<view class="lists" :style="{'margin-top':tops+100+'px'}" v-if="tabActive == 0 || tabActive == 1">
				<view class="li" v-for="(item,index) in lists" @click="FollowUpDetail">
					<view class="name">
						<span>{{ item.xingming }}</span>
						<span style="margin-left: 10rpx;margin-right: 16rpx;">{{ item.kehuleibie }}</span>
						<image src="../../static/10.png"></image>
					</view>
					<view>{{ item.dianhua_zhu }}</view>
					<view>{{ item.gongsiming }}</view>
					<view class="set">
						<span>{{ item.genjin_text }}</span>
						<!-- <span>2020年10月11日 12:00</span> -->
					</view>
					<image class="right" src="../../static/11.png"></image>
					<image class="delete" src="../../static/13.png"></image>
				</view>

			</view>
			<view class="lists" :style="{'margin-top':tops+100+'px'}" v-if="tabActive == 2">
				<view class="li" v-for="(item,index) in lists" @click="detail(item.mingcheng)">
					<view>{{ item.mingcheng }}（{{ item.count }}）</view>
					<image class="right" src="../../static/11.png"></image>
				</view>
			</view>
		</scroll-view>

		<!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" @maskClick="closeScreen">
			<view class="screen-box" :style="{'padding-top':tops+100+'px'}">
				<view class="title">跟进标志</view>
				<view class="list">
					<uni-data-checkbox mode="tag" multiple v-model="screen_value" :localdata="screen_list"></uni-data-checkbox>
				</view>
				<view class="title">时间筛选</view>
				<uni-datetime-picker class="dataRrange" v-model="dataRrange" type="daterange" @maskClick="maskClick" />
				<view class="btn-group">
					<view>重置</view>
					<view @click="confirmScreen">筛选</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {
		put_kehu,
		list_kehuchi,
		dropdownxuanxiang,
		list_kehuleibiefenzu
	} from "@/utils/api.js";
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	export default {
		data() {
			return {
				search: '',
				// 时间段
				dataRrange: '',
				tabList: [{
						text: '全部客户'
					},
					{
						text: '今日新增'
					},
					{
						text: '客户类别分组'
					}
				],
				tabActive: 0,
				screen_list: [{
					text: '足球',
					value: 0
				}, {
					text: '篮球',
					value: 1
				}, {
					text: '游泳',
					value: 2
				}],

				// 客户类别
				save_input_text: [],

				tops: 0,
				height: 0,
				screenPop: false,
				// 数据列表
				lists: [],
				// 分页参数
				page: 1,
				pageSize: 10,
				count: '',
				// 客户类别选项
				leibieList: [],
				// 接收参数
				kehuleibie:''
			}
		},
		onLoad(options) {
			this.kehuleibie = options.kehuleibie
			this.getLeibie()
			this.getList(1)
			uni.getSystemInfo({

				success: (e) => {
					console.log('系统信息', e)

					this.tops = e.statusBarHeight;

					this.height = e.screenHeight - 100
					let custom = uni.getMenuButtonBoundingClientRect();



				}

			})

		},
		methods: {
			onPullDownRefresh() {
				// 处理下拉刷新的逻辑
				console.log('下拉刷新');
				this.page = 1
				this.getList(1)
			},

			onReachBottom() {
				// 处理下拉加载更多的逻辑
				console.log('下拉加载更多');
				this.page++;
				// 模拟加载更多数据
				this.getList();
			},
			// 获取客户类别选项
			async getLeibie() {
				let that = this
				let data = {
					dropdownxuanxiang: 6,
					page: 1,
					size: 999,
					user_id: uni.getStorageSync('userInfo').user_id
				}
				let res = await dropdownxuanxiang(data);
				console.log('获取客户类别选项', res);
				res.results.forEach(function(item) {
					item.text = item.mingcheng
					item.value = item.dropdown_xuanxiang_id
				});
				that.leibieList = res.results
			},
			goBack() {
				uni.navigateBack()
			},
			showPop() {
				if (this.screenPop) {
					this.screenPop = false
				} else {
					this.screenPop = true
				}

			},
			closeScreen() {
				console.log('关闭')
				this.screenPop = false
			},
			reset() {
				this.save_input_text = ''
				this.search = ''
				this.dataRrange = []
				this.page = 1
				this.lists = []
				this.getList(1)
				this.screenPop = false
			},
			confirmScreen() {
				this.page = 1
				this.lists = []
				this.getList(1)
				this.screenPop = false
			},
			detail(mingcheng) {
				uni.navigateTo({
					url: "/pages/customerList/index?kehuleibie=" + mingcheng
				})
			},
			tabChange(index) {
				this.tabActive = index
				this.screenPop = false
				this.getList(1)
			},
			FollowUpDetail() {
				uni.navigateTo({
					url: '/pages/FollowUpDetail/index'
				})
			},

			dataRrangeChange(e) {
				console.log('时间段', e)
				this.dataRrange = e
			},

			deleteIt(row, index) {
				let that = this
				that.edictForm = row
				uni.showModal({
					title: '提示：',
					content: '请确认是否要删除？',
					success: async function(res) {
						if (res.confirm) {
							console.log('确定');
							let data = that.edictForm
							let res = await delete_kehuyinxiangcaidan(that.edictForm.kehuyinxiang_caidan_id)
							console.log('删除状态', res)
							if (res.code == 0) {
								uni.showToast({
									title: '删除成功',
									//icon: 'none',
									duration: 2000
								});
								that.lists.splice(index, 1)
								that.getList()
							}

						} else if (res.cancel) {
							// console.log('取消');
							//TODO
							return
						}
					}
				});
			},

			searchblur() {
				this.page = 1
				this.lists = []
				this.getList(1)
			},

			// 列表
			async getList(type) {
				let that = this
				let dataRrange = ''
				let save_input_text = ''
				console.log(666, that.save_input_text)
				if (that.dataRrange.length > 0) {
					dataRrange = that.dataRrange[0] + ',' + that.dataRrange[1]
				}
				if (that.save_input_text.length > 0) {
					const foundItems = that.leibieList.filter(item => that.save_input_text.includes(item.value));
					save_input_text = foundItems.map(item => item.text).join(', ');
				}

				let data = {
					page: that.page,
					size: 20,
					search: that.search,
					date_range: dataRrange,
					kehuleibie: that.kehuleibie,
					user_id: uni.getStorageSync('userInfo').user_id
				}
				let res = ''
				if(this.tabActive == 0){
				   res = await list_kehuchi(data);
                }else if(this.tabActive == 1){
					
				}else{
				   res = await list_kehuleibiefenzu(data); 
				}
				if (res.code == 0) {
					that.count = res.count

					if (type == 1) {
						that.lists = res.results
					} else {
						that.lists = that.lists.concat(res.results)
						console.log('客户列表===', that.lists)
					}

					// 停止下拉刷新动画
					uni.stopPullDownRefresh();
				}

			},

		}
	}
</script>

<style scoped>
	/deep/ .uni-calendar__content-mobile {
		top: 300rpx !important;
	}

	.topSearch {
		width: 100%;
		height: 160rpx;
		position: absolute;
		top: 0rpx;
		background-color: white;
		z-index: 100;
	}

	.topSearch .screen {
		width: 100%;
		height: 80rpx;
		margin: auto;
	}

	.topSearch .screen .searchInput {
		width: 90% !important;
		margin: auto;
	}

	.topSearch .screen /deep/.uni-easyinput {
		width: 90% !important;
		margin: auto;
	}

	.topSearch .find {
		width: 36%;
		float: right;
		height: 64rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		border: 1px solid #dcdfe6;
		display: flex;
		font-size: 24rpx;
		border-radius: 5rpx;
		color: #999;
		justify-content: space-between;
	}

	.topSearch .find image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		margin-top: 13rpx;

	}

	.tabList {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #333;
		/*#ifdef MP-WEIXIN*/
		/* margin-top: 200rpx; */
		/*#endif*/
		display: flex;
	}

	.tabList .li {
		width: 180rpx;
		text-align: center;
		color: #333;
		font-size: 28rpx;
	}

	.tabActive {
		color: #008BDE !important;
		font-size: 30rpx !important;
	}

	.screen-box {
		background-color: white;
		font-size: 26rpx;
		padding-bottom: 50rpx;
		position: absolute;
		width: 100%;
		z-index: 10;
		padding-top: 10rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.screen-box .title {
		width: 90%;
		height: 50rpx;
		margin: auto;
		margin-top: 20rpx;
	}

	.screen-box .list {
		width: 90%;
		margin: auto;

	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box.is--tag {
		width: 164rpx;
		text-align: center;
	}

	/deep/ .uni-data-checklist .checklist-group .checklist-box .checklist-content {
		display: initial !important;
	}

	.screen-box .dataRrange {
		width: 90% !important;
		margin: auto;
	}

	.screen-box /deep/.uni-date {
		width: 90% !important;
		margin: auto;
	}

	/deep/.uni-calendar__content-mobile {
		bottom: initial !important;
	}

	.screen-box .btn-group {
		width: 400rpx;
		height: 60rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
		margin-top: 100rpx;
	}

	.screen-box .btn-group view {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.screen-box .btn-group view:nth-child(1) {
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
	}

	.screen-box .btn-group view:nth-child(2) {
		background-color: #008BDE;
		color: white;
		border-radius: 10rpx;
	}

	.lists {
		width: 90%;
		margin: auto;
	}

	.lists .li {
		line-height: 60rpx;
		margin-top: 10rpx;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 10rpx;
		font-size: 26rpx;
		position: relative;
	}
    .lists .li view{
		height: 60rpx;
	}
	.lists .li .name {
		font-weight: bold;
		display: flex;
	}

	.lists .li .name image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 16rpx;
	}

	.lists .li .delete {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		bottom: 30rpx;
		right: 10rpx;
	}

	.lists .li .time {
		color: #999;
	}

	.lists .li.set span:nth-child(2) {
		margin-left: 30rpx;
	}

	.lists .li .right {
		width: 18rpx;
		height: 33rpx;
		position: absolute;
		right: 20rpx;
		top: 30%;
	}

	.totalNum {
		width: 90%;
		height: 60rpx;
		margin: auto;
		display: flex;
		padding-top: 20rpx;
		font-size: 28rpx;
		background-color: white;
	}

	.totalNum .line {
		width: 5rpx;
		height: 34rpx;
		background-color: #008BDE;
	}

	.totalNum .text {
		margin-left: 20rpx;
	}
</style>